<%--
  Created by IntelliJ IDEA.
  User: Xiaoqz
  Date: 2021/9/4
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%--isELIgnored: 忽视EL表达式--%>
<%--@ page contentType="text/html;charset=UTF-8" language="java" --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%--引入JSTL标签库--%>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.jsp">登录</a><br>
        <span id="reg_msg" class="err_msg">${register_msg}</span>
    </div>
    <form id="reg-form" action="/cookiesession_case/registerServlet" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username" onblur="checkUname()">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="/cookiesession_case/checkCodeServlet" id="img" onclick="changeImg()">
                    <%--执行一段js代码--%>
                    <a href="javascript:changeImg()" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script src="js/axios-0.18.0.js"></script><%--引入 js 文件--%>
<script>
    function changeImg() {
        //连续两次请求静态资源，浏览器默认请求静态资源，所以第二次请求不会发出,直接访问浏览器缓存的静态资源
        //?" + new Date().getMilliseconds();    为了防止浏览器访问缓存的静态资源，没有实际参数的意义
        document.getElementById("img").src = "/cookiesession_case/checkCodeServlet?" + new Date().getMilliseconds();
    }
    //检查用户名是否存在
    //1. ajax
    function checkUname() {
        //获取输入框的值
        let username = document.getElementById("username").value;
        //发送ajax请求
        //创建核心对象
        let xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //发送请求 --> 将输入框的用户名作为请求参数拼接到URL后面
        xhttp.open("GET", "http://localhost:8080/cookiesession_case/selectUserServlet?username=" + username, true);
        xhttp.send();
        //处理响应数据
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                let flag = this.responseText == 'true';
                if (flag) {
                    document.getElementById('username_err').style.display = 'none';
                } else {
                    document.getElementById('username_err').style.display = '';
                }
            }
        };
    }
    //2. axios
    //引入 js 文件  <script src="js/axios-0.18.0.js">

</script>
</body>
</html>
